<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar :title="form.id>0?'编辑出行人':'添加出行人'" navbarType='3'></wlk-navbar>

        <view class="passenger-content br08">
            <u--form
                    labelPosition="left"
                    :model="form"
                    :rules="rules"
                    ref="uForm"
            >
                <u-form-item
                        labelWidth="90"
                        label="真实姓名"
                        prop="realname"
                        borderBottom
                        ref="item1"
                >
                    <u--input
                            :customStyle="{
                                padding:'18rpx 0'
                            }"
                            v-model="form.realname"
                            clearable
                            placeholder="出行人姓名"
                            border="none"
                    ></u--input>
                </u-form-item>
                <u-form-item
                        labelWidth="90"
                        label="证件类型"
                        prop="gender"
                        borderBottom
                        @click="showIdType = true"
                        ref="item1"
                >
                    <u--input
                            :customStyle="{
                                padding:'18rpx 0'
                            }"
                            v-model="form.idtype"
                            readonly
                            placeholder="请选择证件类型"
                            border="none"
                    ></u--input>
                    <u-icon
                            slot="right"
                            name="arrow-right"
                    ></u-icon>
                </u-form-item>
                <u-form-item
                        labelWidth="90"
                        label="证件号码"
                        prop="idcard"
                        borderBottom
                        ref="item1"
                >
                    <u--input
                            :customStyle="{
                                 padding:'18rpx 0'
                            }"
                            v-model="form.idcard"
                            clearable
                            placeholder="与出游所持证件一致"
                            border="none"
                    ></u--input>
                </u-form-item>
                <u-form-item
                        labelWidth="90"
                        label="手机号码"
                        prop="mobile"
                        borderBottom
                        ref="item1"
                >
                    <u--input
                            :customStyle="{
                                 padding:'18rpx 0'
                            }"
                            type="number"
                            v-model="form.mobile"
                            clearable
                            placeholder="填写出行人本人手机号码"
                            border="none"
                    ></u--input>
                </u-form-item>
                <u-form-item
                        labelWidth="90"
                        label="性别"
                        prop="gender"
                        @click="showSex = true"
                        ref="item1"
                >
                    <u--input
                            :customStyle="{
                                padding:'18rpx 0'
                            }"
                            v-model="form.gender"
                            readonly
                            placeholder="请选择性别"
                            border="none"
                    ></u--input>
                    <u-icon
                            slot="right"
                            name="arrow-right"
                    ></u-icon>
                </u-form-item>
            </u--form>
        </view>
        <u-picker :show="showSex" :columns="sexColumns" keyName="label" :defaultIndex="defaultSexIndex" closeOnClickOverlay @close="showSex = false" @cancel="showSex = false" @confirm="confirmSex" :confirmColor="themeColor"></u-picker>
        <u-picker :show="showIdType" :columns="idTypeColumns" keyName="label" :defaultIndex="defaultIdTypeIndex" closeOnClickOverlay @close="showIdType = false" @cancel="showIdType = false" @confirm="confirmIdType" :confirmColor="themeColor"></u-picker>
        <view class="wlk-fixed-btn wlkflex justify-around ">
            <view style="width: 45%" v-if="form.id>0">
                <u-button :customStyle="{
			        borderRadius:'8px',
			        margin:'0',
                }" size="large" @click="showModal = true" text="删除"></u-button>
            </view>
            <view :style="'width: '+[form.id>0?'45%':'92%']">
                <u-button :customStyle="{
                    fontWeight: 'bold',
			        borderRadius:'8px',
			        margin:'0',
                }" :color="themeColor" size="large" @click="submit" text="保存"></u-button>
            </view>

        </view>
        <u-modal :show="showModal" @confirm="del" title="提示" :content='content' @cancel="showModal=false" :confirmColor="themeColor" showCancelButton></u-modal>

    </view>
</template>

<script>
    var _self;
    import { mapGetters } from 'vuex';
	export default {
        computed: {
            ...mapGetters(['themeColor'])
        },
		data() {
			return {
                showSex: false,
                showIdType: false,
                defaultSexIndex:[1],
                defaultIdTypeIndex:[0],
                showModal:false,
                content:'确认删除出行人?',
                form: {
                    id:'',
                    realname:'',
                    mobile:'',
                    idtype:'身份证',
                    idcard:'',
                    gender:'男',
                },
                sexColumns: [
                    [
                        {
                            label: '女',
                            value: 0
                        },
                        {
                            label: '男',
                            value:1,
                        }
                    ]
                ],
                idTypeColumns: [
                    [
                        {
                            label: '身份证',
                            value: 0
                        },
                        {
                            label: '护照',
                            value: 1
                        },
                        {
                            label: '台胞证',
                            value: 2
                        },
                        {
                            label: '港澳通行证(内地往返港澳通行证),',
                            value: 3
                        },
                        {
                            label: '港澳居民居住证',
                            value: 4
                        },
                        {
                            label: '军官证',
                            value: 5,
                        },
                        {
                            label: '回乡证(港澳往返内地通行证)',
                            value: 6
                        }
                    ]
                ],
                rules: {
                    'realname': {
                        type: 'string',
                        required: true,
                        message: '请填写真实姓名',
                        trigger: ['blur', 'change']
                    },
                    'mobile': {
                        validator: (rule, value, callback) => {
                            return uni.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        trigger: ['change','blur'],
                    },
                    'idcard': {
                        type: 'string',
                        required: true,
                        message: '请填写证件号',
                        trigger: ['blur', 'change']
                    },
                    'gender': {
                        type: 'string',
                        max: 1,
                        required: true,
                        message: '请选择性别',
                        trigger: ['blur', 'change']
                    },

                },
			};
		},
		onLoad(options) {
		    _self = this;
		    if(options && options.id){
		        _self.form.id = options.id;
		        _self.getDetail();
            }
		},
		onShow() {

		},
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        },
		methods: {
            confirmSex(e) {
                this.form.gender = this.sexColumns[0][e.indexs[0]].label;
                this.defaultSexIndex[0] = e.indexs[0];
                this.showSex = false;
            },
            confirmIdType(e){
                this.form.idtype = this.idTypeColumns[0][e.indexs[0]].label;
                this.defaultIdTypeIndex[0] = e.indexs[0];
                this.showIdType = false;
            },
            getDetail(){
                uni.$u.http.post('passenger/getDetail', {
                    id:_self.form.id,
                }).then(res => {
                    _self.form.realname = res.data.item.realname;
                    _self.form.mobile = res.data.item.mobile;
                    _self.form.idcard = res.data.item.idcard;
                    _self.form.idtype = _self.idTypeColumns[0][res.data.item.idtype].label;
                    _self.defaultIdTypeIndex[0] = res.data.item.idtype;
                    _self.form.gender = _self.sexColumns[0][res.data.item.gender].label;
                    _self.defaultSexIndex[0] = res.data.item.gender;
                })
            },
            submit(){
                this.$refs.uForm.validate().then(res => {
                    uni.$u.http.post('passenger/edit', {
                        id:_self.form.id,
                        realname:_self.form.realname,
                        mobile:_self.form.mobile,
                        idcard:_self.form.idcard,
                        idtype:_self.defaultIdTypeIndex[0],
                        gender:_self.defaultSexIndex[0]
                    }).then(res => {
                        uni.$u.toast(res.msg);
                        setTimeout(function () {
                            _self.$Router.back();
                        },500)

                    }).catch(res => {

                    })
                })
            },
            del(){
                uni.$u.http.post('passenger/del', {
                    id:_self.form.id,
                }).then(res => {
                    uni.$u.toast(res.msg);
                    setTimeout(function () {
                        _self.$Router.back();
                    },500)
                })
            }
		},

	};
</script>

<style lang="scss">
    .passenger-content{
        width: 92%;
        padding: 0 30rpx;
        background-color: #FFFFFF;
        margin: 30rpx auto 0 auto;
        box-shadow: 0 2px 4px rgba(0,0,0,.02);
    }
    .wlk-fixed-btn{
        box-shadow: 0px -5px 5px rgba(0, 0, 0, 0);
        background-color: transparent;
    }
</style>
